<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>管理员面板 - 智能医疗系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.5/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</head>
<body class="bg-light">
<div id="app" class="container mt-5">
    <h2 class="text-center mb-4">管理员面板</h2>
    <div class="mb-3 text-end">
        <a href="/logout" class="btn btn-secondary">注销</a>
    </div>

    <!-- 导航选项卡 -->
    <ul class="nav nav-tabs mb-4">
        <li class="nav-item">
            <a class="nav-link active" href="#" @click="currentTab='doctors'">医生管理</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#" @click="currentTab='medicines'">药品库存</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#" @click="currentTab='messages'">消息中心</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#" @click="currentTab='comments'">留言管理</a>
        </li>
    </ul>

    <!-- 医生管理模块 -->
    <div v-show="currentTab === 'doctors'">
        <!-- 新增医生部分 -->
        <div class="card mb-4">
            <div class="card-header">新增医生</div>
            <div class="card-body">
                <form @submit.prevent="addDoctor">
                    <div class="row">
                        <div class="col-md-6">
                            <input type="time" v-model="newSchedule.startTime" class="form-control" step="3600"  placeholder="用户名" required>
                        </div>
                        <div class="col-md-6">
                            <input type="password" v-model="newDoctor.password" class="form-control mb-2" placeholder="密码" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" v-model="newDoctor.name" class="form-control mb-2" placeholder="医生姓名" required>
                        </div>
                        <div class="col-md-6">
                            <select v-model="newDoctor.departmentId" class="form-select" required>
                                <option value="">选择科室</option>
                                <option v-for="dept in departments" :value="dept.id">{{ dept.name }}</option>
                            </select>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary mt-2">创建医生</button>
                </form>
            </div>
        </div>

        <!-- 医生列表 -->
        <div class="card">
            <div class="card-header">现有医生列表</div>
            <div class="card-body">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>姓名</th>
                        <th>科室</th>
                        <th>用户名</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="doctor in doctors" :key="doctor.id">
                        <td>{{ doctor.name }}</td>
                        <td>{{ doctor.department.name }}</td>
                        <td>{{ doctor.user.username }}</td>
                        <td>
                            <button class="btn btn-sm btn-info" @click="showSchedules(doctor)">查看排班</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 排班管理模态框 -->
        <div class="modal fade" id="scheduleModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ selectedDoctor.name }}的排班管理</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form @submit.prevent="addSchedule">
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <input type="date" v-model="newSchedule.date" class="form-control" required>
                                </div>
                                <div class="col-md-4">
                                    <input type="time" v-model="newSchedule.startTime" class="form-control" required>
                                </div>
                                <div class="col-md-4">
                                    <input type="time" v-model="newSchedule.endTime" class="form-control" required>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">添加排班</button>
                        </form>
                        <hr>
                        <h6>现有排班</h6>
                        <ul class="list-group">
                            <li class="list-group-item" v-for="schedule in schedules" :key="schedule.id">
                                {{ schedule.date }} {{ schedule.startTime }} - {{ schedule.endTime }}
                                <button class="btn btn-sm btn-danger float-end" @click="deleteSchedule(schedule.id)">删除</button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 药品库存模块 -->
    <div v-show="currentTab === 'medicines'">
        <div class="card">
            <div class="card-header">药品库存管理</div>
            <div class="card-body">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>药品名称</th>
                        <th>描述</th>
                        <th>库存</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="medicine in medicines" :key="medicine.id">
                        <td>{{ medicine.name }}</td>
                        <td>{{ medicine.description }}</td>
                        <td>
                            <input type="number" v-model.number="medicine.stock"
                                   class="form-control" style="width: 100px">
                        </td>
                        <td>
                            <button class="btn btn-sm btn-success"
                                    @click="updateStock(medicine)">
                                保存修改
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 留言管理模块 -->
    <div v-show="currentTab === 'comments'">
        <div class="card">
            <div class="card-header">患者留言管理</div>
            <div class="card-body">
                <div class="list-group">
                    <div v-for="comment in comments" :key="comment.id" class="list-group-item mb-3">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6>{{ comment.user.username }} 的留言</h6>
                                <p>{{ comment.content }}</p>
                                <small class="text-muted">{{ comment.createdAt }}</small>
                            </div>
                            <div v-if="comment.reply" class="text-end">
                                <p class="text-success">回复：{{ comment.reply }}</p>
                            </div>
                        </div>
                        <div class="mt-2">
                            <textarea v-model="comment.replyText"
                                      class="form-control"
                                      placeholder="输入回复内容"></textarea>
                            <button class="btn btn-sm btn-primary mt-2"
                                    @click="submitReply(comment)">
                                提交回复
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 消息中心模块 -->
    <div v-show="currentTab === 'messages'">
        <div class="card">
            <div class="card-header">系统消息</div>
            <div class="card-body">
                <div v-for="message in messages" :key="message.id"
                     class="alert alert-info" role="alert">
                    <p>{{ message.content }}</p>
                    <small class="text-muted">{{ message.createdAt }}</small>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            currentTab: 'doctors',
            departments: [],
            doctors: [],
            medicines: [],
            comments: [],
            messages: [],
            schedules: [],
            selectedDoctor: null,
            newDoctor: { username: '', password: '', name: '', departmentId: null },
            newSchedule: { date: '', startTime: '08:00', endTime: '17:00' }
        },
        mounted() {
            this.fetchDepartments();
            this.fetchDoctors();
            this.fetchMedicines();
            this.fetchComments();
            this.fetchMessages();
        },
        methods: {
            fetchDepartments() {
                axios.get('/admin/departments').then(res => this.departments = res.data);
            },
            fetchDoctors() {
                axios.get('/admin/doctors/schedules').then(res => this.doctors = res.data);
            },
            fetchMedicines() {
                axios.get('/admin/medicines').then(res => this.medicines = res.data);
            },
            fetchComments() {
                axios.get('/admin/comments').then(res => this.comments = res.data);
            },
            fetchMessages() {
                axios.get('/admin/messages').then(res => this.messages = res.data);
            },
            addDoctor() {
                axios.post('/admin/doctors', this.newDoctor)
                    .then(() => {
                        this.fetchDoctors();
                        this.newDoctor = { username: '', password: '', name: '', departmentId: null };
                    });
            },
            showSchedules(doctor) {
                this.selectedDoctor = doctor;
                axios.get(`/admin/schedules/${doctor.id}`)
                    .then(res => this.schedules = res.data);
                new bootstrap.Modal(document.getElementById('scheduleModal')).show();
            },
            addSchedule() {
                const data = {
                    doctorId: this.selectedDoctor.id,
                    date: this.newSchedule.date,
                    startTime: this.newSchedule.startTime,
                    endTime: this.newSchedule.endTime
                };

                axios.post('/admin/schedules', data)
                    .then(() => {
                        this.fetchSchedules();
                        this.newSchedule = { date: '', startTime: '08:00', endTime: '17:00' };
                    })
                    .catch(error => console.error('排班创建失败:', error));
            },
            deleteSchedule(id) {
                axios.delete(`/admin/schedules/${id}`)
                    .then(() => this.showSchedules(this.selectedDoctor));
            },
            updateStock(medicine) {
                axios.put(`/admin/medicines/${medicine.id}`, { stock: medicine.stock })
                    .then(() => this.fetchMedicines());
            },
            submitReply(comment) {
                axios.post(`/admin/comments/${comment.id}/reply`, { reply: comment.replyText })
                    .then(() => this.fetchComments());
            }
        }
    });
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>